<template>
	<view class="page">
		<view class="page-box">
			<view class="btnBox">
				<view class="" style="font-size: 28rpx;">
					请选择身份
				</view>
				<view class="choose-nickname-row" style="display: flex;justify-content: space-between;">
					<vvSelect :list="allList" label="name" valueKey="id" placeholder-style="color: #979797;" :font="24"
						ref="vvSelect" @change="tabChange" style="width: 86%;" :placeholder="placeholderText"
						:value="form.type">
						<!-- -->
					</vvSelect>
					<view class="" style="margin-left: 8rpx;">
						<u-icon name="arrow-down" size="16" v-if="!closeIcon"></u-icon>
						<u-icon name="close-circle" color="#807E7E;" v-if="closeIcon" size="18" @click="closeSearch"
							style="margin-left: 10rpx;"></u-icon>
					</view>
				</view>
				<view class="business" v-if="form.type == 2">
					<view class="choose-nickname-row" style="font-size: 28rpx;border-bottom: none;">
						请上传企业营业执照
					</view>
					<u-upload :fileList="business_Pic" @afterRead="afterPic" @delete="deletePic"
						name="business_license">
					</u-upload>
				</view>
				<view class="cover">
					<view class="choose-nickname-row" style="font-size: 28rpx;border-bottom: none;">
						请上传{{form.type == 2?'企业法人':''}}身份证正反面
					</view>
					<u-upload :fileList="coverPath" @afterRead="afterRead" @delete="deleteCover" name="business_license"
						:maxCount="2">
					</u-upload>
				</view>
				<view class="choose-nickname-row">
					<view class="" style="font-size: 28rpx;">
						请输入{{form.type == 2?'企业法人':'该用户'}}手机号
					</view>
					<input v-model="form.phone" type="number" />
				</view>
				<view class="choose-nickname-row" >
					<view class="">
						请输入交易代理人姓名
					</view>
					<input v-model="form.name" type="nickname" />
				</view>

				<view class="choose-nickname-row" >
					<view class="" style="font-size: 28rpx;">
						请输入交易代理人手机号
					</view>
					<input v-model="form.tle" type="number" />
				</view>
				
				
			</view>
			<!-- :style="{background:allFill?'#466EC5':'#EBEBEB',color:allFill?'#fff':'#909090'}" -->
			<view class="button" size="mini" @tap.stop="toSubmit">提交</view>
		</view>
	</view>
</template>
<script>
	import config from "@/request/baseUrl.js";
	import WxLogin from "@/components/Author/index";
	import vvSelect from '@/components/vv-select/index.vue'
	import {
		commonUpload
	} from "@/request/common.js";
	import {
		information,
		getinformation
	} from "@/request/homeApi.js";
	export default {
		components: {
			WxLogin,
			vvSelect
		},
		data() {
			return {
				baseUrl: config.baseUrl,
				showPop: false, // 完善信息
				userInfo: {}, // 用户信息
				phone: "", // 手机号码
				token: "",
				cardList: [], // 会员列表

				allList: [{
						name: '企业',
						id: 2
					},
					{
						name: '自然人',
						id: 1
					}
				],
				fileList1: [],
				placeholderText: '身份选择',
				form: {
					type: '',
					custom_lists_id: '',
					name: '',
					tle: '',
					phone: '',
					images: '',
					business_license: '',
				},
				coverPath: [], // 身份证图片
				business_Pic: [],
				closeIcon: false,
				allFill: false,
				information: ''
			};
		},
		onLoad(e) {
			this.information = e.type
			this.form.custom_lists_id = e.id ? e.id : ''
			if (e.type == 2) {
				this.getInfo(this.form.custom_lists_id)
			}

		},
		watch: {
			form: {
				handler(e) {
					for (var key in e) {
						if (!e[key]) {
							this.allFill = false
						} else {
							this.allFill = true
						}
					}

					// console.log(this.allFill,'a',e)
				},
				deep: true, // 可以深度检测到 obj 对象的属性值的变化
				immediate: true //刷新加载  立马触发一次handler
			},

		},

		methods: {
			getInfo(id) {
				getinformation({
					custom_lists_id: id
				}).then(res => {
					if (res.code == 200) {
						this.form = res.data[0]
						this.form.type = res.data[0].type
						if (this.form.images != '') {
							this.coverPath = this.form.images.split(',').map(item => {
								return {
									url: this.baseUrl + item
								}
							})
						}
						if (this.form.business_license != '') {
							this.business_Pic = this.form.business_license.split(',').map(item => {
								return {
									url: this.baseUrl + item
								}
							})
						}

						console.log(this.form.images, this.coverPath, this.business_Pic, 'this.business_Pic')
					}
				})
			},
			closeSearch() {
				this.closeIcon = false
				this.$refs.vvSelect.emptCheckLabels()
				this.form.type = ''

			},
			tabChange(e) {
				this.form.type = e
				if (this.form.type) {
					this.closeIcon = true
				}

			},
			// 上传
			toSubmit() {
				if (this.form.type == '') {
					uni.showToast({
						title: '请选择身份',
						icon: 'none',
					})
					return;
				}
				if (this.form.phone == '') {
					if (this.form.type == 1) {
						uni.showToast({
							title: '请输入手机号',
							icon: 'none',
						})
						return;
					} else if (this.form.type == 2) {
						uni.showToast({
							title: '请输入企业法人手机号',
							icon: 'none',
						})
						return;
					}
				}

				if (this.form.name == '') {
					uni.showToast({
						title: '请输入企业代理人姓名',
						icon: 'none',
					})
					return;
				}
				if (this.form.tle == '') {
					uni.showToast({
						title: '请输入代理人手机号',
						icon: 'none',
					})
					return;
				}
				let cover = []
				cover = this.coverPath.map(item => {
					return {
						url: item.url
					}
				})
				if (cover.length < 2) {
					uni.showToast({
						title: '请正确上传身份证照',
						icon: 'none',
					})
					return;
				}

				if (this.form.type == 2) {
					let business = []
					business = this.business_Pic.map(item => {
						return {
							url: item.url
						}
					})
					if (business.length < 1) {
						uni.showToast({
							title: '请正确上传营业执照',
							icon: 'none',
						})
						return;
					}
					let license = []
					for (let i of business) {
						let url = '';
						if (i.url.indexOf(this.baseUrl) != -1) {
							url = i.url.split(this.baseUrl)[1];
						} else {
							url = i.url;
						}
						license.push(url)
					}
					this.form.business_license = license.toString()
					// return
				}
				let data = Object.assign({}, this.form);
				let list = []
				for (let i of cover) {
					let url = ''
					if (i.url.indexOf(this.baseUrl) != -1) {
						url = i.url.split(this.baseUrl)[1];
					} else {
						url = i.url;
					}
					list.push(url)
				}
				if (this.information == 1) {
					data.id = ''
				}
				data.images = list.toString()
				console.log(data)
				// return
				information(data).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							title: res.msg,
							icon: "none",
						});
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 1000)
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none",
						});
					}
				});
			},
			// 新增图片
			async afterRead(e) {
				let list = [].concat(e.file)
				let len = this.coverPath.length;
				list.map((item) => {
					this.coverPath.push({
						...item,
						status: "uploading",
						message: "上传中",
					});
				});
				for (let i = 0; i < list.length; i++) {
					const result = await this.uploadFilePromise(list[i].url);
					let item = this.coverPath[len];
					this.coverPath.splice(
						len,
						1,
						Object.assign(item, {
							status: "success",
							message: "",
							url: result,
						})
					);
					len++;
				}
			},
			// 新增图片
			async afterPic(e) {
				let list = [].concat(e.file)
				let len = this.business_Pic.length;
				list.map((item) => {
					this.business_Pic.push({
						...item,
						status: "uploading",
						message: "上传中",
					});
				});
				for (let i = 0; i < list.length; i++) {
					const result = await this.uploadFilePromise(list[i].url);
					let item = this.business_Pic[len];
					this.business_Pic.splice(
						len,
						1,
						Object.assign(item, {
							status: "success",
							message: "",
							url: result,
						})
					);
					len++;
				}
			},
			// 上传凭证图片
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					commonUpload(url).then((res) => {
						if (res.code == 200) {
							setTimeout(() => {
								resolve(res.data[0]);
							}, 1000);
						}
					});
				});
			},
			// 删除图片
			deleteCover(e) {
				this.coverPath.splice(e.index, 1);
			},
			// 删除图片
			deletePic(e) {
				this.business_Pic.splice(e.index, 1);
			},
		},
	};
</script>
<style>

</style>
<style lang="scss" scoped>
	.page {
		// background-image: url("");
		background-size: 100% 100%;
		height: 100vh;
		// background-repeat: no-repeat;
		// position: fixed;
		// top: 0;
		// overflow: hidden;
		// left: 0;
		width: 100vm;

		&-box {
			min-height: 910rpx;
			margin: 0 auto;
			padding: 60rpx;
			width: 80%;
			display: flex;
			flex-direction: column;
			justify-items: center;

			>view {
				margin-bottom: 0rpx;
			}

			.btn {
				font-size: 28rpx;
				background-color: #fff;
				border: 1rpx solid #dddddd;
				padding: 20rpx;
				border-radius: 8rpx;

				&:active {
					background-color: #f2f2f2;
				}
			}
		}
	}

	.button {
		background-color: #58B99D;
		width: 100%;
		color: #fff;
		border: 2rpx solid #EBEBEB;
		border-radius: 20rpx;
		height: 86rpx;
		text-align: center;
		line-height: 86rpx;
		margin-top: 56rpx;
		font-size: 30rpx;
	}

	.noCode {
		color: #909090;
		font-size: 26rpx;
		margin-top: 10rpx;
		display: flex;
		justify-content: space-between;
		width: 31%;
		float: right;
	}

	.forgetCode {
		color: #466EC5;
		width: 99%;
		font-size: 26rpx;
		text-align: right;
		margin-top: 0rpx;
	}

	.cover /deep/ .u-upload__button {
		width: 580rpx !important;
		height: 320rpx !important;
	}

	.cover /deep/ .u-upload__wrap__preview__image {
		width: 580rpx !important;
		height: 320rpx !important;
	}

	.business /deep/ .u-upload__button {
		width: 180rpx !important;
		height: 210rpx !important;
	}

	.business /deep/ .u-upload__wrap__preview__image {
		width: 180rpx !important;
		height: 210rpx !important;
	}

	.btnBox {
		width: 100%;
		min-height: 730rpx;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;

		.tex {
			width: 140rpx;
			height: 80rpx;
			margin-bottom: 40rpx;
		}

		.choose-nickname-row {
			width: 100%;
			height: 5%;
			text-align: left;
			padding: 26px 2px 8px;
			font-size: 28rpx;
			margin: 0 auto;
			border-bottom: 3rpx solid #F2F2F2;
			vertical-align: center;

			/deep/.input {
				color: #000;
			}

			.codeinput {
				color: #466EC5;
				width: 180rpx;
			}
		}

	}
</style>